<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
        >
<h:head>
    <title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
</h:head>
<h:body>
    <ui:composition template="/pages/common/commonLayout.xhtml">

        <ui:define name="content">




            <h:form id="form1">

                <p:panelGrid style="margin-top:20px">
                    <f:facet name="header">
                        <p:row>
                            <p:column colspan="7">Customer Information</p:column>
                        </p:row>

                    </f:facet>
                    <f:facet name="footer">
                        <p:row>
                            <p:column  colspan="4" style="text-align: right">
                                Finals MVP
                            </p:column>
                            <p:column  colspan="3" rowspan="3">
                                <p:panel id="display" header="Information" style="margin-top:10px;">
                                    <h:panelGrid columns="2">
                                        <h:outputText value="Name: " />
                                        <h:outputText value="#{orderMB.order.customer.name}" />

                                        <h:outputText value="City: " />
                                        <h:outputText value="#{orderMB.order.customer.city}" />
                                    </h:panelGrid>
                                </p:panel>
                            </p:column>
                        </p:row>

                        <p:row>



                            <p:column  colspan="4" style="text-align: right">
                                <p:autoComplete id="selectCustomer" value="#{orderMB.selectedCustomer}"
                                                completeMethod="#{userMB.complete}"  var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="#{customerConverter}" forceSelection="true">
                                    <p:column>
                                        <p:graphicImage value="/images/icons/customer.png" width="32" height="32"/>
                                    </p:column>
                                    <p:column>
                                        #{p.name}
                                    </p:column>
                                    <p:ajax event="itemSelect" listener="#{orderMB.handleSelectCustomer}" update="display,selectCustomer"/>
                                </p:autoComplete>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column  colspan="4" style="text-align: right">
                                <p:commandButton value="Complete" actionListener="#{orderMB.completeSale}"
                                                 ajax="false" />
                            </p:column>
                        </p:row>
                    </f:facet>
                </p:panelGrid>

                <p:dataTable var="car" value="#{orderMB.orderItems}"  rows="10"   resizableColumns="true"

                                     selectionMode="single"  selection="#{orderMB.selectedItem}" id="dataTable" >

                            <p:ajax event="rowSelect" listener="#{orderMB.onRowSelect}"  oncomplete="productDialog.show()" />

                            <f:facet name="header">
                                <h:outputLabel value="Search :" for="acSimple" />
                                <p:autoComplete id="acSimple" value="#{orderMB.selectedProduct}"
                                                completeMethod="#{productMB.complete}"  var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="#{productConverter}" forceSelection="true">
                                    <p:column>
                                        <p:graphicImage value="/images/icons/product.png" width="32" height="32"/>
                                    </p:column>
                                    <p:column>
                                        #{p.name}
                                    </p:column>
                                    <p:ajax event="itemSelect" listener="#{orderMB.handleSelectProduct}" update=":msg ,:form3:saleDialog" />
                                </p:autoComplete>
                                <p:spacer width="100" height="10" />
                                <h:outputLabel value="Order Date :" for="orderDate" />
                                <p:calendar value="#{orderMB.order.orderDate}" maxdate="" id="orderDate"  />
                                <p:spacer width="10" height="10" />
                                <h:outputLabel value="Due Date :" for="dueDate" />
                                <p:calendar value="#{orderMB.order.dueDate}" maxdate="" id="dueDate"  />
                            </f:facet>

                            <p:column headerText="Name" sortBy="name" >
                                <h:outputText value="#{car.product.name}" />
                            </p:column>

                            <p:column headerText="Price" sortBy="salePrice" >
                                <h:outputText value="#{car.salePrice}" />
                            </p:column>

                            <p:column headerText="Qty." sortBy="Quantity" >
                                <h:outputText value="#{car.quantity}"   />
                            </p:column>
                            <p:column headerText="Disc" sortBy="discount" >
                                <h:outputText value="#{car.discount}" />
                            </p:column>
                            <p:column headerText="Total" sortBy="totalAmount" >
                                <h:outputText value="#{car.totalAmount}" />
                            </p:column>

                            <p:columnGroup type="footer">
                                <p:row>
                                    <p:column colspan="4" footerText="Items In Cart:: " style="text-align:right"/>
                                    <p:column footerText="#{fn:length(orderMB.order.items)}" />

                                </p:row>
                                <p:row>
                                    <p:column colspan="4"  footerText="Sub Total: " style="text-align:right"/>
                                    <p:column footerText="#{orderMB.order.totalAmount}" />

                                </p:row>
                                <p:row>
                                    <p:column colspan="4"  footerText="Total: " style="text-align:right"/>
                                    <p:column footerText="#{orderMB.order.totalAmount}" />

                                </p:row>
                                <p:row>
                                    <p:column colspan="4"  footerText="Amount Due: " style="text-align:right"/>
                                    <p:column footerText="#{orderMB.order.totalAmount}" />

                                </p:row>
                            </p:columnGroup>

                        </p:dataTable>

                <p:panelGrid style="margin-top:20px">
                    <f:facet name="header">
                        <p:row>
                            <p:column colspan="7">Customer Information</p:column>
                        </p:row>

                    </f:facet>
                    <f:facet name="footer">

                        <p:row>
                            <p:column  colspan="4" style="text-align: right">
                                <p:commandButton value="Complete" actionListener="#{orderMB.completeSale}"
                                                 ajax="false" visible="#{orderMB.isCompleteAllowed}"/>
                            </p:column>
                        </p:row>
                    </f:facet>
                </p:panelGrid>

            </h:form>
            <h:form id="form">
            <p:dialog widgetVar="composeDlg" modal="true" header="New Product" width="630" showEffect="fade" hideEffect="fade" >

                    <table>

                        <tr>
                            <td><h:outputLabel for="name" value="Name : " /></td>
                            <td><p:inputText id="name" value="#{productMB.name}">
                                <f:validateLength minimum="5" />
                                <p:ajax event="blur" update="nameMsg" />
                            </p:inputText>
                                <p:message id="nameMsg" for="name" display="icon"/>
                            </td>
                        </tr>

                        <tr>
                            <td><h:outputLabel for="description" value="Description : " /></td>
                            <td>
                                <p:inputTextarea id="description" rows="5" cols="30" value="#{productMB.description}" counter="counter" maxlength="10"
                                                 counterTemplate="{0} characters remaining." autoResize="false">
                                <f:validateLength minimum="5" />
                                <p:ajax event="blur" update="descriptionMsg" />

                            </p:inputTextarea >
                                <h:outputText id="counter" />
                                <p:message id="descriptionMsg" for="description" display="icon"/>
                            </td>
                        </tr>

                    </table>
                    <p:commandButton value="Send"  var="btnSave" onclick="composeDlg.hide()" actionListener="#{productMB.addProduct}" update=":msg" process="@this"/>
                    <p:commandButton value="Cancel" onclick="composeDlg.hide()" type="button" />


            </p:dialog>
            </h:form>
            <h:form id="form2">

                        <p:dialog header="Order Detail" widgetVar="productDialog" resizable="false"
                                  showEffect="explode" hideEffect="explode">

                            <h:panelGrid id="display" columns="2" cellpadding="4">

                                <f:facet name="header">
                                    <p:graphicImage value="/images/cars/#{orderMB.selectedItem.id}.jpg"/>
                                </f:facet>

                                <h:outputText value="Name:" />
                                <h:outputText value="#{orderMB.selectedItem.product.name}" style="font-weight:bold"/>

                                <h:outputText value="Qty:" />
                                <h:outputText value="#{orderMB.selectedItem.quantity}" style="font-weight:bold"/>

                                <h:outputText value="Note:" />
                                <h:outputText value="#{orderMB.selectedItem.note}" style="font-weight:bold"/>

                                <h:outputText value="Discount:" />
                                <h:outputText value="#{orderMB.selectedItem.discount}" style="font-weight:bold"/>


                                <h:outputText value="Price:" />
                                <h:outputText value="#{orderMB.selectedItem.salePrice}" style="font-weight:bold"/>
                            </h:panelGrid>
                        </p:dialog>

            </h:form>
            <h:form id="form3">

                <p:dialog header="Order Detail" widgetVar="saleDialog" resizable="false"  id="saleDialog"
                          showEffect="explode" hideEffect="explode" visible="#{orderMB.hideSaleDialog}">



                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{orderMB.selectedProduct.name}.jpg"/>
                        </f:facet>
                        <table>


                            <h:outputText value="Name:" />
                            <h:outputText value="#{orderMB.selectedProduct.name}" style="font-weight:bold"/>



                        <tr>
                            <td><h:outputLabel for="salePrice" value="Sale Price : " /></td>
                            <td>
                                <p:inplace id="ajaxInplace" editor="true">
                                    <p:ajax event="save" listener="#{productMB.handleSalePriceUpdate}" update=":msg" />

                                    <p:inputText id="salePrice" value="#{orderMB.salePrice}">
                                        <p:ajax event="blur" update="salePriceMsg" />
                                    </p:inputText>
                                </p:inplace>
                                <p:message id="salePriceMsg" for="salePrice" display="icon"/>
                            </td>
                        </tr>
                            <tr>
                                <td><h:outputLabel for="quantity" value="Quantity : " /></td>
                                <td><p:inputText id="quantity" value="#{orderMB.quantity}">
                                    <p:ajax event="blur" update="quantityMsg" />
                                </p:inputText>
                                    <p:message id="quantityMsg" for="quantity" display="icon"/>
                                </td>
                            </tr>
                         <tr>
                            <td><h:outputLabel for="stockQuantity" value="Stock : " /></td>
                            <td><h:outputText id="stockQuantity" value="#{orderMB.selectedProduct.stockQuantity}" style="font-weight:bold">

                            </h:outputText>

                            </td>
                        </tr>


                        </table>
                    <p:commandButton value="OK"  var="btnSave" onclick="saleDialog.hide()" actionListener="#{orderMB.addSelectedItem}" update=":msg,:form1:dataTable " process="@this"/>
                    <p:commandButton value="Cancel" onclick="saleDialog.hide()" type="button" actionListener="#{orderMB.cancelSelectedItem}"/>


                </p:dialog>

            </h:form>

            <p:growl id="msg" />

        </ui:define>





    </ui:composition>
</h:body>

</html>
